<template xmlns="http://www.w3.org/1999/html">
    <div class="mypaywrap">
        <!---->
        <div class="top">
            <div class="top_t">
                <div class="iconfont icon-cha1 top_back" ></div>
                <div style="color: #f1f1f1;font-size: 18px;margin-top: 15px;">充值</div>
                <div class="top_detail" >明细</div>
            </div>
            <div class="top_balance">
                <div class="top_balance_money"> 0 <span style="font-size: 12px;color: #f1f1f1">牛币</span></div>
            </div>
            <div class="top_balance_txt">
                <div>账户余额</div>
            </div>
        </div>
        <!---->
        <div class="body">
            <div class="body_recharge ">
                <div class="body_recharge_txt ">牛币充值</div>
                <div class="body_recharge_option">
                    <ul class="body_recharge_option_but" >
                        <li  v-for="(item, index) in moneys"
                             :key="'moneys' + index"
                            @click="selectmoney(index)"
                            :class="moneyIndex === index ? ' liactive' : 'li' "
                            > {{item.money}} </li>

                    </ul>
                    <div class="body_recharge_option_inp">
                        <input class="inp" @focus="abc" type="text" placeholder="其他金额" @click="butnum" v-model="iptpay" >
                        <span style="color: #090909;">牛币</span>
                    </div>
                </div>

            </div>
            <!--支付方式-->
            <div>

                <div class="body_payment">
                    <mt-radio
                            title="支付方式"
                            align="right"
                            v-model="value"
                            :options="options">
                    </mt-radio>
                </div>
            </div>
            <!--支付金额-->
            <div class="body_payment_txt ">
                <span>支付金额</span>
                <span style=" color:#fd494b " v-model="paynum"> {{ iptpay  ? iptpay : puble}} </span>
            </div>
            <!---->
            <div class="agreementwarp ">
                <span @click="hideagree" class="agree"> <i  class="iconfont icon-dagou"></i></span>
                <span @click="showagree" class="agrees"> </span>
                <span class="agreement ">我已经阅读并且同意<a class="agreement_user">《用户注册协议》</a> </span>
            </div>
            <div style="margin: 0 auto;width: 90%;">
            <button class="agreebut" @click="cc" > 确认充值 </button>
            </div>

        </div>

    </div>

</template>

<script>
    export default {
        name: "mypay",
        data(){
            return {
                moneyIndex:'',
                moneys:[
                    {money:100},
                    {money:500},
                    {money:1000},
                    {money:5000},
                    {money:10000},
                    {money:20000},
                ],
                options:[
                    {
                        label: '支付宝支付',
                        value: '',
                    },
                    {
                        label: '微信支付',
                        value: '',
                    }
                ],

                iptpay:'',
                paynum:'',
                puble:'',


            }
        },

        created() {

        },
        mounted(){
          this.selectmoney(0)
        },

        methods:{
            selectmoney:function(index){
                this.moneyIndex = index;
                this.puble=this.moneys[index].money;
                this.iptpay='';
           },

            butnum(){
                this.iptpay=this.puble;
                document.querySelector('.inp').style.color='#fd494b';
            },
            abc(){
                this.moneyIndex = '';
            },
            hideagree(){
                document.querySelector(".agree").style.display='none';
                document.querySelector(".agrees").style.display='block';
                document.querySelector(".agreebut").disabled=true;
                document.querySelector(".agreebut").style.backgroundColor='#686868';
            },
            showagree(){
                document.querySelector(".agree").style.display='block';
                document.querySelector(".agrees").style.display='none';
                document.querySelector(".agreebut").disabled=false;
                document.querySelector(".agreebut").style.backgroundColor='#fe4a49';
            },
            cc(){
                console.log('qqq')
            }

        },
    }
</script>

<style scoped>

</style>
